<template>
  <div class="diancai-container">
    <h2>西式菜品列表</h2>
    <el-divider />

    <!-- 分类选择 -->
    <div class="category-filter">
      <el-radio-group v-model="selectedCategory" @change="filterByCategory">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button v-for="category in categories" :key="category" :label="category">
          {{ category }}
        </el-radio-button>
      </el-radio-group>
    </div>

    <!-- 菜品展示 -->
    <el-row :gutter="20" class="dish-list">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="dish in displayDishes" :key="dish.id" class="dish-col">
        <el-card :body-style="{ padding: '0px' }" class="dish-card">
          <img :src="dish.image" class="dish-image" />
          <div class="dish-info">
            <h3>{{ dish.name }}</h3>
            <div class="dish-price-row">
              <span class="dish-price">$ {{ dish.price.toFixed(2) }}</span>
              <el-button type="primary" size="small" circle @click="addToCart(dish)">
                <el-icon><Plus /></el-icon>
              </el-button>
            </div>
            <div class="dish-description">{{ dish.description }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 购物车悬浮按钮 -->
    <div class="cart-floating-button" @click="goToCart">
      <el-badge :value="cartCount" :max="99" class="cart-badge">
        <el-button type="primary" circle>
          <el-icon><ShoppingCart /></el-icon>
        </el-button>
      </el-badge>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { cartStore } from '../store/CartStore'
import { Plus, ShoppingCart } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const store = cartStore()

// 西式菜品数据
const dishes = ref([
  {
    id: 1,
    name: '牛排',
    price: 45,
    category: '主菜',
    description: '鲜嫩多汁的牛排，搭配特制酱料',
    image: 'https://free.picui.cn/free/2025/07/16/68771bcba0116.jpg'
  },
  {
    id: 2,
    name: '披萨',
    price: 30,
    category: '主食',
    description: '经典意式披萨，多种口味可选',
    image: 'https://free.picui.cn/free/2025/07/16/68771bcb87f29.webp'
  },
  {
    id: 3,
    name: '蔬菜沙拉',
    price: 18,
    category: '沙拉',
    description: '新鲜蔬菜搭配美味酱汁',
    image: 'https://free.picui.cn/free/2025/07/16/68771bcd8471b.webp'
  },
  {
    id: 4,
    name: '奶油蘑菇汤',
    price: 15,
    category: '汤品',
    description: '浓郁奶香的蘑菇汤',
    image: 'https://free.picui.cn/free/2025/07/16/68771bcb4ba9e.webp'
  },
  {
    id: 5,
    name: '意大利面',
    price: 28,
    category: '主食',
    description: '劲道面条搭配肉酱或番茄酱',
    image: 'https://free.picui.cn/free/2025/07/16/68771bce122cd.webp'
  },
  {
    id: 6,
    name: '烤鸡翅',
    price: 22,
    category: '小吃',
    description: '香酥可口的烤鸡翅',
    image: 'https://free.picui.cn/free/2025/07/16/68771bcae18e5.webp'
  },
  {
    id: 7,
    name: '提拉米苏',
    price: 26,
    category: '甜品',
    description: '经典意大利甜品，入口即化',
    image: 'https://free.picui.cn/free/2025/07/16/68771bcd90d41.webp'
  },
  {
    id: 8,
    name: '卡布奇诺',
    price: 16,
    category: '饮品',
    description: '香浓咖啡搭配细腻奶泡',
    image: 'https://free.picui.cn/free/2025/07/16/68771bcaf2af1.webp'
  }
])

// 分类过滤
const selectedCategory = ref('all')
const categories = computed(() => {
  const categorySet = new Set(dishes.value.map(dish => dish.category))
  return [...categorySet]
})

const displayDishes = computed(() => {
  if (selectedCategory.value === 'all') {
    return dishes.value
  } else {
    return dishes.value.filter(dish => dish.category === selectedCategory.value)
  }
})

const filterByCategory = (category) => {
  selectedCategory.value = category
}

// 购物车相关
const cartCount = computed(() => store.getCartCount)

const addToCart = (dish) => {
  store.addToCart(dish)
  ElMessage({
    message: `已添加 ${dish.name} 到购物车`,
    type: 'success'
  })
}

const goToCart = () => {
  router.push('/cart')
}
</script>

<style scoped>
.diancai-container {
  padding: 20px;
  position: relative;
  background-color: #f8f8f8; 
}

h2 {
  text-align: center;
  margin-bottom: 10px;
  color: #333; /* 标题颜色 */
}

.category-filter {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

.dish-list {
  margin-top: 20px;
}

.dish-col {
  margin-bottom: 20px;
}

.dish-card {
  height: 100%;
  transition: transform 0.3s;
  background-color: #fff; /* 卡片背景色为白色 */
  border-radius: 8px; /* 卡片圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 卡片阴影 */
}

.dish-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.dish-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.dish-info {
  padding: 14px;
}

.dish-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.dish-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}

.dish-price {
  color: #ff6b6b;
  font-weight: bold;
  font-size: 18px;
}

.dish-description {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
  height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cart-floating-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  cursor: pointer;
}

.cart-badge :deep(.el-badge__content) {
  background-color: #ff6b6b;
}
</style>